<template>
  <sea-pop-button :name="text" :icon="icon" :title="title" :header="title" :width="width" :placement="placement">
    <div class="sea-file-picker">
      <div @click="$refs.input.click()">
        <el-button size="small" type="primary" :loading="loading">点击上传</el-button>
      </div>
      <div v-for="(item, idx) in fileList" :key="idx" class="sea-file-picker-item">
        <a style="margin-right: 16px"><i class="fa fa-file-o"></i> {{ item.name || '文件' }}</a>
      </div>

      <label v-if="cleanable" class="sea-chk-box" title="导入之前，清理此前已有的数据">
        <el-checkbox v-model="setting.clearHistorical"></el-checkbox>
        清除历史数据
      </label>
      <span style="font-size: small">{{ tips }}</span>
      <div class="clearfix"></div>
      <el-button v-if="template" title="点击下载文件上传所需的基础模版..."
                 type="text" class="pull-right" @click="downloadTemplate">
        文件模版 >
      </el-button>
    </div>
  </sea-pop-button>
</template>
<script>
/* eslint-disable */
import SeaPopButton from '../../pop-button'
import Layers from "@/lang/layers";

/**
 *
 * Excel导入按钮
 *
 * 集成了模版下载和Excel导入的功能。
 * 如果使用button-group时，推荐将按钮放在结尾，因为这是一个包含了多个button的复合组件
 */
export default {
    name: "SeaUploadButton"
    , components: {SeaPopButton}
    , props: {
        // 按钮名称
        text: {type: String, default: undefined}
        // 图标
        , icon: {type: String, default: undefined}
        // 标题
        , title: {type: String, default: undefined}

        // 面板宽度
        , width: {type: String, default: '200'}
        // 位置
        , placement: {type: String, default: 'bottom-end'}

        // 文件模版下载地址
        , template: {type: String, default: undefined}
        // 提示性语句
        , tips: {type: String, default: '限定格式：xls、xlsx'}
        // 允许客户勾选数据清理（导入新的数据，清除历史数据）
        , cleanable: {type: Boolean, default: true}

        // 文件上传
        , upload: {type: Function, default: undefined}
    }
    , data() {
        return {
            // 文件列表
            fileList: []
            // 是否处在加载状态
            , loading: false
            // 文件配置信息
            , setting: {
                // 是否清除历史数据
                clearHistorical: false
            }
        }
    }
    , methods: {
        /**
         * 下载Excel模版
         */
        downloadTemplate: function () {
            if (this.template !== undefined) {
                window.open(this.template);
            }
        },
        /**
         * 用户选择了新的文件
         *
         * @param event change事件对象实例
         */
        onFileChange(event) {
            try {
                this.loading = true;
                let files = event.target.files;

                let ret = Layers.linkedPromise((resolve, i) => {
                    this.upload(files[i], this.setting).then(item => {
                        this.fileList.push(item);
                        resolve();
                    })
                }, 0, files.length);

                ret.then(() => {
                    this.onChange(this.fileList);
                    // 完成所有文件的提交，关闭加载条
                    this.loading = false
                    event.target.value = '';
                });
            } catch (e) {
                console.error(e);
                // 触发异常，关闭加载条
                this.loading = false
                event.target.value = '';
            }
        }
    }
}
</script>

<style scoped>
.sea-chk-box {
    cursor: pointer;
    font-size: small;
    margin: 6px 0;
    display: block
}
</style>